import { defineStore } from "pinia";
import { darkTheme, lightTheme } from "naive-ui";
import { isFullscreen } from "@/hooks/fullscreen";
import type { DesignState, MenuMode } from "@/typings/design";
import type { LocaleType } from "@/typings/locale";
import { store } from "../index";
import { setLocale } from "@/plugins/vue-i18n/index";

export const useDesignStore = defineStore("design", {
  state: (): DesignState => {
    return {
      prefixCls: "vt", //class 前缀
      isDark: false, //是否暗黑模式
      theme: lightTheme, //当前主题
      isShowLogo: true, //是否展示logo
      isFullScreen: isFullscreen, //是否全屏
      collapsedWidth: 64, //侧边栏折叠后的宽度
      width: 210, //展开宽度
      collapsed: false, //是否折叠
      activeKey: "console", //激活的key
      collapsedIconWidth: 22,
      menuMode: "vertical",
      isShowDrawer: false, //是否展示设计抽屉
      drawerWidth: 300, //抽屉宽度
      drawerPlacement: "right",
      inverted: false, //是否高对比度
      iconSize: 20, //icon 大小
      isShowBreadcrumb: true, //是否展示面包屑
      isShowBreadcrumbIcon: false, //是否展示面包屑图标
      isGreyMode: false, //是否灰色模式
      langMode: "zh-CN", //语言模式
      isShowTagView: true, //是否展示tagView
    };
  },
  getters: {
    getIsDark(): boolean {
      return this.isDark;
    },
    getIsVertical(): boolean {
      return this.menuMode === "vertical";
    },
  },
  actions: {
    setIsDark() {
      this.isDark = !this.isDark;
      this.theme = this.isDark ? darkTheme : lightTheme;
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    setMenuMode(mode: MenuMode) {
      this.menuMode = mode;
    },
    setIsShowDrawer() {
      this.isShowDrawer = !this.isShowDrawer;
    },
    setInverted() {
      this.inverted = !this.inverted;
    },
    getPrefixCls(value: string) {
      return `${this.prefixCls}-${value}`;
    },
    setIsShowBreadcrumb() {
      this.isShowBreadcrumb = !this.isShowBreadcrumb;
    },
    setIsShowBreadcrumbIcon() {
      this.isShowBreadcrumbIcon = !this.isShowBreadcrumbIcon;
    },
    setIsGreyMode() {
      this.isGreyMode = !this.isGreyMode;
    },
    setIsShowLogo() {
      this.isShowLogo = !this.isShowLogo;
    },
    setLangMode(lang: LocaleType) {
      this.langMode = lang;
      setLocale(this.langMode);
    },
    setIsShowTagView() {
      this.isShowTagView = !this.isShowTagView;
    },
    setActiveKey(value: string) {
      this.activeKey = value;
    },
  },
  persist: true,
});

export const useDesignStoreWithout = () => useDesignStore(store);
